import React from 'react';
import { Table, Button, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './EmergencyPlan.less'

import { useNavigate } from 'react-router-dom';

interface DataType {
  key: string;
  sequence: number;
  reportName: string;
  year: number;
  applicationFile: string;
  planFile: string;
  summaryFile: string;
  actions: string;
}

const EmergencyPlan: React.FC = () => {
  const navigate = useNavigate();
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'sequence',
      key: 'sequence',
      width: 80,
    },
    {
      title: '预案名称',
      dataIndex: 'reportName',
      key: 'reportName',
    },
    {
      title: '年份',
      dataIndex: 'year',
      key: 'year',
      width: 100,
    },
    {
      title: '申请文件',
      dataIndex: 'applicationFile',
      key: 'applicationFile',
      render: (text) => (
        <a href="#" style={{ color: '#4169E1' }}>{text || '查看'}</a>
      ),
    },
    {
      title: '批复文件',
      dataIndex: 'planFile',
      key: 'planFile',
      render: (text) => (
        <a href="#" style={{ color: '#4169E1' }}>{text || '查看'}</a>
      ),
    },
    {
      title: '预案文件',
      dataIndex: 'summaryFile',
      key: 'summaryFile',
      render: (text) => (
        <a href="#" style={{ color: '#4169E1' }}>{text || '查看'}</a>
      ),
    },
    {
      title: '操作',
      key: 'actions',
      render: () => (
        <div>
          <a href="#" style={{ color: '#4169E1', marginRight: 8 }}>查看</a>
          <span>|</span>
          <a href="#" style={{ color: '#FF0000', marginLeft: 8 }}>删除</a>
        </div>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: '1',
      sequence: 1,
      reportName: '2022年天津某交告预案',
      year: 2022,
      applicationFile: '查看',
      planFile: '查看',
      summaryFile: '查看',
      actions: '',
    },
    {
      key: '2',
      sequence: 2,
      reportName: '2022年天津某交告预案',
      year: 2021,
      applicationFile: '查看',
      planFile: '查看',
      summaryFile: '查看',
      actions: '',
    },
    {
      key: '3',
      sequence: 3,
      reportName: '2022年天津某交告预案',
      year: 2021,
      applicationFile: '查看',
      planFile: '查看',
      summaryFile: '查看',
      actions: '',
    },
    {
      key: '4',
      sequence: 4,
      reportName: '2022年天津某交告预案',
      year: 2020,
      applicationFile: '查看',
      planFile: '查看',
      summaryFile: '查看',
      actions: '',
    },
  ];

  return (
    <>
      <div className='container'>
        <div className='searchBar'>
          <Input.Group compact>
            <Input style={{ width: '200px' }} placeholder="工程时间" />
            <Input style={{ width: '200px' }} placeholder="检查时间" />
            <Button type="primary">查询</Button>
            <Button style={{ marginLeft: 8 }}>重置</Button>
          </Input.Group>
        </div>
        <div className='tableContainer'>
          <Table
            columns={columns}
            dataSource={data}
            pagination={{
              total: 50,
              pageSize: 10,
              showQuickJumper: true,
              showSizeChanger: true,
              showTotal: (total) => `共 ${total} 条`,
            }}
          />
        </div>
      </div>
    </>
  );
};

export default EmergencyPlan; 